<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			body {
				background-color: #eee;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				font-weight: 800;
			}
			
			h5 {
				font-weight: 700;
				padding-bottom: 3px;
			}
			
			.mui-table-view-cell {
				font-weight: 800;
			}
			
			p {
				text-indent: 2em;
				font-size: 12px;
				font-weight: 600;
			}
			
			h6 {
				font-size: 11px;
			}
			
			.mui-card {
				margin-bottom: 3px;
				margin: 0 0.5% 3px 0.5%;
			}
			
			.header {
				background-color: #CCC;
			}
			
			.with-border {
				border-bottom: 1px solid #BBBBBB;
			}
			
			code,
			pre {
				background-color: #eee;
				font-weight: 500;
				font-size: 12px;
			}
		</style>
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script type="text/javascript" charset="UTF-8">
			var themes = ['primary', 'success', 'warning', 'danger', 'purple'];
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var search = location.search;
				var id = search.substr(search.indexOf('=') + 1);
				mui.get('https://nutz.cn/yvr/api/v1/topic/' + id, {}, function(data) {
					//原帖
					$('#b-title').text(data.data.title); //标题
					$('#top').text(data.data.top ? '顶' : ''); //顶
					$('#good').text(data.data.good ? '荐' : ''); //荐
					if (data.data.tags.length == 0) { //隐藏无标签行
						$('#tags-panel').hide();
					}
					mui.each(data.data.tags, function(i, item) { //遍历标签
						$('#tags').append('<span class="mui-badge mui-badge-' + themes[Math.floor(Math.random() * (themes.length - 1))] + '">' + item + '</span> ')
					});
					//发布信息
					$('#publish-time').text(data.data.create_at_forread);
					$('#author').text(data.data.author.loginname);
					$('#visits').text(data.data.visit_count);
					//帖子内容
					$('#content').html(data.data.content);
					//回复头部
					$('#reply-count').text(data.data.reply_count);
					$('#last_reply').text(data.data.last_reply_at_forread);
					//回复列表
					mui.each(data.data.replies, function(i, item) {
						console.log(JSON.stringify(item));
						$('#reply-panel').append('<li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><img class="mui-media-object mui-pull-left" src="'
													+ item.author.avatar_url
													+'"><h6 class="mui-ellipsis">'
													+ item.author.loginname
													+' 发表于: '
													+ item.create_at_forread
													+'</h6><p class="mui-h6">'
													+ item.content
													+'</p></div></div></li>');
					})
					$('#title').remove(); //jQuery来整
					$('#content-panel')[0].style.display = 'block';
				}, 'json');
			})
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">帖子详情</h1>
		</header>
		<div class="mui-content">
			<p id="title" class="mui-title">兽总正在组装数据...</p>
			<!--style="display: none;"-->
			<div id="content-panel">
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<h5><sup style="color: red;" id="top">顶</sup> <sup id="good" style="color: green;">荐</sup> <span id="b-title">帖子标题 </span></h5>
							<h6 id="tags-panel">标签:<span id="tags">  </span></h6>
							<h6 class="with-border">
								发布时间: <span id="publish-time">2016-01-01</span> 
								作者: <span id="author">xxx</span> 
								浏览量: <span id="visits">999</span></h6>
							<p id="content">
								帖子内容
							</p>
						</li>
					</ul>
				</div>

				<div class="mui-card">
					<ul class="mui-table-view" id="reply-panel">
						<li class="mui-table-view-cell header"><span id="reply-count">888</span> 回复 <span class="mui-pull-right" style="font-size: 12px;font-weight: 500;">最后回复时间: <span id="last_reply">2015-01-13</span> </span>
						</li>
						<!--这里填充回复列表-->
					</ul>
				</div>

				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell header">添加回复
						</li>
						<li class="mui-table-view-divider">
							<div class="mui-content-padded">
								<h1>h1. Heading</h1>
							</div>
						</li>
					</ul>
				</div>
			</div>
	</body>

</html>